<template lang="html">
  <div class="box">
  <div class="menuview-wrapper">
       <div class="menu-wrapper" ref="menuScroll">
         <div class="">
           <div @click="scrollTo(index)" class="menu-item" :class="{act:menuIndex===index}" v-for="(m,index) in goods">
             {{m.name}}
           </div>
         </div>

       </div>
       <div class="food-wrapper" ref="foodScroll">
         <div class="">
          <dl class="" v-for="foods in goods">
             <dt>{{foods.name}}</dt>
             <dd  v-for="food in foods.foods">
                <img :src="food.image" alt="">
                <div class="food-inif">
                   <h4>{{food.name}}</h4>
                   <p class="msg" v-if="food.info">{{food.info.substr(0,20)+"..."}}</p>
                      <p class="description">月售{{food.rating}}份 好评率{{food.rating}} %</p>
                         <p class="price"> <span>￥{{food.price}}</span> <cartbutton
                           @ball-click="ballEvent" :food="food"></cartbutton> </p>
                </div>
             </dd>
          </dl>
           </div>
       </div>
  </div>
   <shopcart ref="shopCart" :selectedFoods="selectedFoods"></shopcart>
  </div>
</template>

<script>
import shopcart from '@/components/shopcart';
import BScroll from 'better-scroll';
import cartbutton from '@/components/cartbutton'
export default {
  data(){
    return{
      scrollY:0,
      heights:[],
      goods:{
        type:Array
      }
    }
  },
  components:{
    shopcart,
    BScroll,
    cartbutton
  },
  mounted(){
        this.axios.get('/api/goods').then(res =>{
          if(res.data.errno==0){
            this.goods=res.data.data;
            this.$nextTick(()=>{
               this. _initScroll();
                this._countHeight();
            });

          }
        })
  },
  computed:{
     menuIndex(){
       for(let i=0;i<this.heights.length;i++){
         let now=this.heights[i];
         let next=this.heights[i+1];
         if(now>=this.scrollY&&this.scrollY<next){
           return i;
         }else if(!next){
          return i;
         }
       }
       return 0;
     },
     selectedFoods(){
       let foods=[];
       if(this.goods.length==0){
         return []
       };
       for(let i=0;i<this.goods.length;i++){
         let good=this.goods[i];
         good.foods.forEach(food =>{
           if(food.count>0){
             foods.push(food);
           }
         })
       }
       return foods;
     }
  },
  methods:{
    ballEvent(target){
    this.$refs.shopCart.ballClick(target);

    },
     //初始化滚动条
     _initScroll(){
       this.menuScroll=new BScroll(this.$refs.menuScroll,{
         click:true
       });
       this.foodScroll=new BScroll(this.$refs.foodScroll,{
           probeType:3,
           click:true
       });
       this.foodScroll.on('scroll',(pos)=>{
          this.scrollY=Math.abs(Math.round(pos.y));

       })
     },
     _countHeight(){
       let dts=this.$refs.foodScroll.getElementsByTagName('dt');
       for(let i=0;i<dts.length;i++){
         this.heights.push(dts[i].offsetTop);
       }

     },
     scrollTo(index){
       this.menuIndex=index;
       this.foodScroll.scrollTo(0,-this.heights[index],500);
     }
  }

}
</script>

<style lang="less">
@import '../../static/less/var.less';
.box{
  .menuview-wrapper {
      position: absolute;
      width: 100%;
      top: @base*355rem;
      bottom: @base*96rem;
      display: flex;
      overflow: hidden;
      background: #fff;
      .menu-wrapper {
          width: @base*170rem;
          height: 100%;
          background: #fff;
          .menu-item {
              width: @base*140rem;
              height: @base*60rem;
              padding: @base*35rem @base*15rem;
              background: #f5f5f5;
              border-bottom: 1px solid yellow;
              font-size: @base*24rem;
              &.act {

                  background: #fff;
                  border-left: @base*5rem solid @mc;
                  width: @base*135rem;
              }
              span {
                  display: block;
                  width: 100%;
                  height: 100%;
              }
          }

      }
      .food-wrapper {
          flex: 1;
          height: 100%;
          dl {
              dt {
                  height: @base*32rem;
                  padding: @base*15rem @base*20rem;
                  font-size: @base*28rem;
                  background: pink;
                  color: red;
              }
              dd {
                  min-height: @base*90rem;
                  position: relative;
                  display: flex;
                  padding: @base*30rem @base*20rem;
                  img {
                      width: @base*104rem;
                      height: @base*104rem;
                      margin-right: @base*30rem;
                      margin-top: @base*10rem;
                  }
                  .food-inif{
                      flex: 1;
                      display: flex;
                      flex-direction: column;
                      h4 {
                          font-size: @base*32rem;
                          color: #333;
                      }
                      .msg {
                          color: @fc1;
                          font-size: @base*10rem;
                      }
                      .description {
                          color: @fc1;
                          font-size: @base*10rem;
                      }
                      .price {
                          color: red;
                          font-size: @base*30rem;
                          font-weight: 700;
                          display: flex;
                          justify-content: space-between;
                      }
                  }

              }
          }
      }
  }
}
.menuview-wrapper {
    position: absolute;
    width: 100%;
    top: @base*355rem;
    bottom: @base*96rem;
    display: flex;
    overflow: hidden;
    background: #fff;

}
</style>
